<section class="content-header">
    <h1>
        Calculation报表
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label for="DateTimeRange">时间</label>
                        <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
                    </div>
                    <div class="form-group">
                        <label>区域</label>
                        <dx-drop-down-box #ddda style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="subAreaSelected"
                        displayExpr="subArea" placeholder="请选择区域" [showClearButton]="true" 
                        [dataSource]="subAreaItems">
                        <dxo-drop-down-options [height]="340"></dxo-drop-down-options>
                        <div *dxTemplate="let data of 'content'">
                            <button type="button" (click)="clearSubAreaSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                            <button type="button" (click)="subAreaSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                            <dx-data-grid [dataSource]="subAreaItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }" [filterRow]="{ visible: true }"
                                [(selectedRowKeys)]="subAreaSelected" [scrolling]="{ mode: 'infinite' }" [height]="265" [showColumnLines]="true"
                                [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                                <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                <dxi-column dataField="subArea" caption="区域" >
                                </dxi-column>
                            </dx-data-grid>
                        </div>
                    </dx-drop-down-box>
                    </div>
                    <div class="form-group">
                        <label>班次</label>
                        <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
                            [(selectedItem)]="shiftSelected" [value]="shiftItems[0]" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">数据展示</h3>
                    <div class="box-tools pull-right">
                        <!-- <button type="button" (click)="saveChanges()" class="btn btn-info btn-sm" data-toggle="tooltip" title="保存"><i class="fa fa-save"></i></button> -->
                        <button type="button" class="btn btn-info btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <!-- <dx-select-box #selectBox style="height:35px;margin-bottom:10px;border-radius: 0px" [items]="filterVlaueItems" [acceptCustomValue]="true"
                        [value]="filterVlaueItems[0]" (onValueChanged)="filterChange($event)" (onCustomItemCreating)="addFilterVlaueItemItem($event)"></dx-select-box> -->
                    <dx-data-grid #dataGrid [dataSource]="items" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-export [enabled]="true" fileName="Calculation Report" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxo-filter-row [visible]="true" [applyFilter]="auto"></dxo-filter-row>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxi-column [allowEditing]="false" dataField="subArea" caption="生产线">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="shift" caption="班次">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="op" caption="工位">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="totCTime" caption="总工作循环时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="autoTime" caption="自动运行时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="ocycNum" caption="循环次数">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="flttime" caption="停机时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="downNum" caption="停机次数">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="blktime" caption="堵塞时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="stvtime" caption="待料时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="octime" caption="循环超时(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="target" caption="目标产量">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="goodparts" caption="合格品产量">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="rjparts" caption="不合格品产量">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="goodProcess" caption="合格品的加工时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="scrapProcess" caption="不合格品的加工时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="targetWorktime" caption="理论工作时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="totalWorktime" caption="总工作时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="purchCycle" caption="Purch.Cycle规划节拍(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="avgcycle" caption="实际平均节拍(秒)"> 
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="ratedCt" caption="Rate.Cycle规划节拍(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="cycleDiff" caption="Purch.Cycle-平均节拍(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="downMTTR" caption="平均停机时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="downMCBF" caption="平均停机频次">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="saa" caption="单机开动率">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="grossJPH" caption="不考虑开动的实际JPH(Gross JPH)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="netJPH" caption="考虑开动的实际JPH(NET JPH)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="purJPH" caption="规划JPH(Pur JPH)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="jphdiff" caption="NET JPH-Pur JPH">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="avgdown" caption="平均循环停机时间(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="avgblk" caption="平均循环堵塞时间(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="avgstv" caption="平均循环待料时间(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="blockedStraved" caption="堵塞待料时间(分)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="totalFLT" caption="报警时间小计(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="totDuration" caption="自动采集换刀时间(秒)">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="totlnterval" caption="人工采集换刀时间(秒)">
                        </dxi-column>
                        <!-- <div *dxTemplate="let d of 'cellTemplate'">
                            <label [ngSwitch]="d.data.reportFilter">
                                <input type="checkbox" name="optionsCheckboxes" *ngSwitchCase="1" (click)="onCheckBoxChange(d.data)" checked>
                                <input type="checkbox" name="optionsCheckboxes" *ngSwitchCase="0" (click)="onCheckBoxChange(d.data)">
                            </label>
                        </div> -->
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
</section>